<script setup>
  import { ref,reactive } from 'vue';

  const content=ref('');
  const notes=reactive([
    {
      id:1,
      content:'笔记1'
    },
    {
      id:2,
      content:'笔记2'
    }
  ])

  function addNote(){
    if(!content.value){
      alert('请输入笔记内容！')
      return;
    }
    notes.push({
      id:notes.length+1,
      content:content.value
    })
    content.value=''
  }
</script>

<template>
  <div>
    <h1>DCS的小记事本</h1>
    <div>
      <textarea v-model="content" placeholder="请输入内容"></textarea>
      <button @click="addNote">添加</button>
    </div>
    <ol>
      <li v-for="elem in notes" :key="elem.id">
        {{ elem.content }}
        <button @click="notes.splice(notes.indexOf(elem),1)">删除</button>
      </li>
    </ol>
  </div>
</template>

<style scoped>

</style>
